<template>
	<el-dialog
		:title="cuFromTitle"
		v-model="cuVisible"
		width="600px"
		top="0"
		:destroy-on-close="true"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
		:show-close="false"
	>
		<div>
			<div>
				模式：
				<el-radio-group v-model="form.loop">
					<el-radio v-for="item in loopOptions" :key="item.value" :label="item.value">{{item.label}}</el-radio>
				</el-radio-group>
			</div>
			<div v-show="form.loop === 0">
				<el-button type="text" size="mini" @click="addRule()">添加规则</el-button>
			</div>
			<el-table :data="ruleDatas" style="width: 100%" v-show="form.loop === 0">
				<el-table-column prop="threshold_num" label="门槛">
					<template #default="scope">
						<el-input v-model="scope.row.threshold_num" placeholder="请输入内容">
							<template #prepend>满</template>
							<template #append>元</template>
						</el-input>
					</template>
				</el-table-column>
				<el-table-column prop="discount_num" label="优惠">
					<template #default="scope">
						<el-input v-model="scope.row.discount_num" placeholder="请输入内容">
							<template #prepend>{{ activity_type === 1 ? "打" : "减" }}</template>
							<template #append>{{ activity_type === 1 ? "折" : "元" }}</template>
						</el-input>
					</template>
				</el-table-column>
				<el-table-column prop="op" label="操作" width="80">
					<template #default="scope">
						<el-popconfirm title="确定删除吗？" @confirm="delRule(scope.$index)">
							<template #reference>
								<el-button type="text" size="mini">删除</el-button>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<el-table :data="oneRuleDatas" style="width: 100%" v-show="form.loop === 1">
				<el-table-column prop="threshold_num" label="门槛">
					<template #default="scope">
						<el-input v-model="scope.row.threshold_num" placeholder="请输入内容">
							<template #prepend>满</template>
							<template #append>元</template>
						</el-input>
					</template>
				</el-table-column>
				<el-table-column prop="discount_num" label="优惠">
					<template #default="scope">
						<el-input v-model="scope.row.discount_num" placeholder="请输入内容">
							<template #prepend>{{ activity_type === 1 ? "打" : "减" }}</template>
							<template #append>{{ activity_type === 1 ? "折" : "元" }}</template>
						</el-input>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="hideForm" :loading="btnLoad" size="mini">取消</el-button>
				<el-button type="primary" :loading="btnLoad" size="mini" @click="cuFormSubmit"
				>提交</el-button
				>
			</div>
		</template>
	</el-dialog>
</template>

<script>
import { ElMessage } from "element-plus";

export default {
	name: "shop-goods-activity-rule",
	components: {},
	props: {
		baseUrl: { type: String, default: "" }
	},
	emits: ["success"],
	data() {
		return {
			// 如果为0时为添加
			activityId: 0,
			btnLoad: false,
			cuVisible: false,
			activity_type: 0,
			title: 0,
			form: {
				loop: 0
			},
			loopOptions: [
				{
					label: "多条",
					value: 0
				},
				{
					label: "循环",
					value: 1
				}
			],
			ruleDatas: [],
			oneRuleDatas: [
				{
					threshold_num: 0,
					discount_num: 0
				}
			]
		};
	},
	computed: {
		cuFromTitle() {
			return "《" + this.title + "》活动规则";
		}
	},
	methods: {
		hideForm() {
			this.cuVisible = false;
		},
		show(_activityId, _activity_type, _title) {
			this.form.loop = 0;
			this.oneRuleDatas = [{ threshold_num: 0, discount_num: 0 } ];
			this.ruleDatas = [];
			this.getData(_activityId);
			this.activityId = _activityId;
			this.activity_type = _activity_type;
			this.title = _title;
			this.cuVisible = true;
		},
		getData(_activityId) {
			this.$API.shop.goodsActivity
				.getRule({ activity_id: _activityId })
				.then((res) => {
					console.log(res);
					if (res.code === 0) {
						this.form.loop = res.data.loop;
						let tmpRules = [];
						res.data.rules.map(item => {
							tmpRules.push({
								discount_num: item.discount_num / 100,
								threshold_num: item.threshold_num / 100
							});
						});
						if (res.data.loop > 0) {
							this.oneRuleDatas = tmpRules;
						} else {
							this.ruleDatas = tmpRules;
						}
					}
				})
				.catch((err) => {
					ElMessage.error("失败," + err);
				});
		},
		addRule() {
			this.ruleDatas.push({
				threshold_num: 0,
				discount_num: 0
			});
		},
		delRule(_index) {
			this.ruleDatas.splice(_index, 1);
		},
		cuFormSubmit() {
			this.btnLoad = true;

			setTimeout(() => {
				this.btnLoad = false;
			}, 10000);

			let submitData = {
				activity_id: this.activityId,
				loop: this.form.loop,
				rules: []
			};

			if (this.form.loop === 1) {
				submitData.rules = this.oneRuleDatas;
			} else {
				submitData.rules = this.ruleDatas;
			}

			submitData.rules.map(item => {
				item.discount_num = item.discount_num * 100;
				item.threshold_num = item.threshold_num * 100;
			});

			if (submitData.rules.length < 1) {
				ElMessage.error("请填写规则");
				this.btnLoad = false;
				return;
			}

			this.$API.shop.goodsActivity
				.setRule(submitData)
				.then((res) => {
					if (res.code === 0) {
						ElMessage.success("提交成功");
						this.formSuccess();
					}
					else {
						this.$message.error(res.message);
					}
				})
				.catch((err) => {
					ElMessage.error("失败," + err);
				});
		},
		formSuccess() {
			this.btnLoad = false;
			this.cuVisible = false;
			this.$emit("success");
		},
		formFail() {
			this.btnLoad = false;
		}
	}
};
</script>

<style scoped></style>
